@import 'base.scss';

// 补丁 base
@import '~@/assets/style/fixed/base.scss';
// 补丁 iconfont
@import '~@/assets/style/fixed/iconfont.scss';
// 补丁 element
@import '~@/assets/style/fixed/element.scss';
// 补丁 n-progress
@import '~@/assets/style/fixed/n-progress.scss';
// 补丁 tree-view
@import '~@/assets/style/fixed/tree-view.scss';
// 补丁 v-charts
@import '~@/assets/style/fixed/v-charts.scss';

// 动画
@import '~@/assets/style/animate/vue-transition.scss';

// 在这里写公用的class
// 注意 这个文件里只写class
// mixin等内容请在 public.scss 里书写

// 文字相关
.#{$prefix}-tc {
  text-align: center;
}

.#{$prefix}-tl {
  text-align: left;
}

.#{$prefix}-tr {
  text-align: right;
}

// 浮动相关
.#{$prefix}-fl {
  float: left;
}

.#{$prefix}-fr {
  float: right;
}

.#{$prefix}-fcr {
  @extend %flex-center-row;
}

.#{$prefix}-fcc {
  @extend %flex-center-col;
}

// 鼠标状态
.#{$prefix}-cm {
  &:hover {
    cursor: move !important;
  }
}

.#{$prefix}-cp {
  &:hover {
    cursor: pointer !important;
  }
}

// 边距相关
$sizes: (0, 5, 10, 15, 20);

@for $index from 1 to 6 {
  .#{$prefix}-m-#{nth($sizes, $index)} {
    margin: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mt-#{nth($sizes, $index)} {
    margin-top: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mr-#{nth($sizes, $index)} {
    margin-right: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mb-#{nth($sizes, $index)} {
    margin-bottom: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-ml-#{nth($sizes, $index)} {
    margin-left: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-p-#{nth($sizes, $index)} {
    padding: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pt-#{nth($sizes, $index)} {
    padding-top: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pr-#{nth($sizes, $index)} {
    padding-right: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pb-#{nth($sizes, $index)} {
    padding-bottom: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pl-#{nth($sizes, $index)} {
    padding-left: #{nth($sizes, $index)}px !important;
  }
}

// 快速使用
.#{$prefix}-m {
  margin: 20px !important;
}

.#{$prefix}-mt {
  margin-top: 20px !important;
}

.#{$prefix}-mr {
  margin-right: 20px !important;
}

.#{$prefix}-mb {
  margin-bottom: 20px !important;
}

.#{$prefix}-ml {
  margin-left: 20px !important;
}

.#{$prefix}-p {
  padding: 20px !important;
}

.#{$prefix}-pt {
  padding-top: 20px !important;
}

.#{$prefix}-pr {
  padding-right: 20px !important;
}

.#{$prefix}-pb {
  padding-bottom: 20px !important;
}

.#{$prefix}-pl {
  padding-left: 20px !important;
}

// 过期样式
.#{$prefix}-expired {
  color: $color-text-placehoder;
  text-decoration: line-through;
}
